import pd from '/api/productData.js';
import cd from '/api/cartData.js';
import rfb from '/components/right-fixed-bar.js'
(() => {
    $('.header-top-nav-wrap').load('/components/head-nav.html');
    const params = new URLSearchParams(location.search);
    $('.head').load('/components/head-search.html', function() {
        /* 隐藏位置下拉菜单 */
        $('.logo_dropdown').hide();
        /* 更改样式 */
        $('.search-bar').css('border-color', "#E12118").find('.search-btn').css('background-color', "#E12118");
    });
    $('.bottom-footer-wrap').load('/components/bottom-footer.html');
    $('.right-bar').load('/components/right-fixed-bar.html');

    renderDetial(params.get('pid'), params.get('discount'));
})()

function renderDetial(pid, k) {
    if (pid == null) location.href = '/index.html';
    pd.getByPid(pid, p => {
        const c = `<img src='/img/chaoshi.png'/>`;
        const b = p.price_plus.length > 0;
        $('.search-key').attr('placeholder', p.title);
        const str = `
            <div class="product-detial">
                <div class="img-wrap fl">
                    <div class='min-img'>
                        <div class="zoom-item"></div>
                        <img src='${p.imgsrc}' >
                    </div>
                    <div class='img-bg'>
                        ${k?`
                            <p style="font-size: 17px;">
                                <span>${k}</span>&nbsp;
                                <span>(12.2-12.14)</span>
                            </p>
                        `:""}
                    </div>
                    <div class='big-img'>
                        <img src='${p.imgsrc}' >
                    </div>
                </div>
                <div class="info-wrap fl">
                    <div class="p-name">
                        ${p.name.replace('京东超市',c)}
                    </div>
                    <div class="pinfo">
                        <div class="jdprice">
                            <div class="dt">京 东 价</div>
                            <div class="dd">
                                <span class="p-price">
                                    <span>￥</span>
                                    <span class="price">${p.price}</span>
                                </span>
                                <div class="plus-price ${b?'':'hide'}">
                                    <span class="p-price-plus">
                                        <span class="price">${p.price_plus}</span>
                                    </span>
                                    <img src="/img/plus-price.png" alt="">
                                    <span class="text">
                                        <strong>PLUS会员</strong>
                                        专享价
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cart-operate">
                        <div class="o-amount">
                            <div class="wrap-input">
                                <input type="text" min="1" class="text buy-num" value="1">
                                <a href="javascript:;" class="btn-reduce">-</a>
                                <a href="javascript:;" class="btn-add">+</a>
                            </div>
                            
                        </div>
                        <a class="add-cart" data-id="${p.pid}" href="javascript:;">加入购物车</a>
                    </div>
                </div>
            </div>
        `;
        $('.product-wrap').html(str);
        if (b) $('.p-price .price').html(`<del>${$('.p-price .price').text()}</del>`)
        /* 设置京东国际 */
        if (p.name.match('进口') != null) $('.p-name img').after("<img src='/img/guoji.png' style='height: 16px;'/>");
        /* 设置title */
        $('title').text(p.name.replace('京东超市', ''));
        /* 设置店铺背景 */
        $('.shop-banner-wrap').addClass(getRandBg());
        /* 设置店铺名 */
        $('.shop-banner-wrap a').text(p.shop).attr('href', `/pages/list.html?shop=${p.shop}`);
        /* 面包屑 */
        $('.detial-nav-category').text(p.category).attr('href', `/pages/list.html?q=${p.category}`);
        $('.detial-nav-title').text(p.title).attr('href', `/pages/list.html?title=${p.title}`);
        /* 购物车事件 */
        $('.add-cart').on('click', function() {
            console.log(Math.abs($('.buy-num').val()));
            cd.update($(this).data('id'), Math.abs($('.buy-num').val()), null, true);
            rfb.intoCart($('.min-img img'), $(this).offset());
        })
        $('.btn-reduce').on('click', function() {
            const num = $('.buy-num').val() - 1;
            $('.buy-num').val(num > 0 ? num : 1);
        })
        $('.btn-add').on('click', function() {
            $('.buy-num').val(+($('.buy-num').val()) + 1);
        })
        imgZoom()
    })
}

function getRandBg() {
    return 'rg' + Math.ceil(Math.random() * 6);
}

function imgZoom() {
    $('.img-wrap').eq(0).on({
        'mouseover': () => {
            $('.zoom-item').eq(0).show();
            $('.big-img').eq(0).show();
        },
        'mousemove': function(e) {
            let x = e.pageX - $(this).offset().left - $('.zoom-item').eq(0).width() / 2;
            let y = e.pageY - $(this).offset().top - $('.zoom-item').eq(0).height() / 2;
            let mX = $('.min-img img').eq(0).width() - $('.zoom-item').eq(0).width();
            let mY = $('.min-img img').eq(0).height() - $('.zoom-item').eq(0).height();

            x = x >= mX ? mX : (x <= 0 ? 0 : x);
            y = y >= mY ? mY : (y <= 0 ? 0 : y);
            $('.zoom-item').eq(0).css({
                left: x,
                top: y
            })
            $('.big-img img').eq(0).css({
                left: -x * Math.floor($('.min-img img').eq(0).width() / $('.zoom-item').eq(0).width()),
                top: -y * Math.floor($('.min-img img').eq(0).height() / $('.zoom-item').eq(0).height())
            })
        },
        'mouseout': function() {
            $('.zoom-item').eq(0).hide();
            $('.big-img').eq(0).hide();
        }
    });
}